/*
  @author wenbin
  @description 自动调整座位提示
  @updateDate 最后更新时间为:2022-03-29
*/

<template>
  <div class="tips">
    <div class="simg-t dn">
      <div class="simg-ti">
        自动调座
        <img
          src=""
          class="simg"
          @click="showtips()"
        />
      </div>
      <div class="switch-box">
        <input
          id="ipt1"
          class="switch-box-input"
          type="checkbox"
          :checked="tips ? 'checked' : ''"
          @click="ctips()"
        />
        <label for="ipt1" class="switch-box-slider"></label>
      </div>
    </div>
    <div class="simg-2 dn">所选座位已售时，系统自动调至最佳观影座位</div>
    <div class="showtips dn" v-show="ts">
      <div class="showtips-t">
        <h1>调座规则</h1>
        <div class="showtips-t-d1">
          第三方服务商出票，由于出票过程中存在时间差，可能存在已选座位被占情况。为了不耽误您时间，我们将按照优先选取从（银幕中央-核心区域-边缘）的顺序为您调换座位。购买多张票将继续为您保持连座。
        </div>
        <div class="showtips-t-d2" @click="showtips()">我知道了</div>
      </div>
    </div>
    <div class="boxshow dfccs" v-show="istocom">
      <div>
        <div class="tocom-box dfccs">
          <img class="showimg mb20" :src="tztipsImg">
          <div class="f30 c3">为节省您的购票时间，若您所选座位被占时</div>
          <div class="f28 cf0  mt15">系统自动将座位调至剩余座位中最佳观影区</div>
          <div class="mt30 dflr w1">
            <div @click="autoSeatno()" class="dfccs auto_s_btn py15">
              <div class="f30 cf mb7">不调座</div>
              <div class="f24 cf">无座自动退款</div>
            </div>
            <div @click="autoSeatyes()" class="dfccs auto_s_btn asbyes py15">
              <div class="f30 mb7">同意调座</div>
              <div class="f24">最优临近座位</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    // tips: Boolean
    proptocom: Boolean
  },
  data: function () {
    return {
      ts: false,
      tips: false,
      istocom: false,
      tztipsImg: require('@/assets/images/tztips.png')
    }
  },
  // 监控data中的数据变化
  watch: {
    proptocom: function () {
      this.istocom = this.proptocom
    }
  },
  methods: {
    showtips: function () {
      this.ts = !this.ts
    },
    ctips: function () {
      this.tips = !this.tips
      console.log('tips--->>', this.tips ? 1 : 0)
      this.$emit('tips', this.tips)
    },
    // 自动调座，否
    autoSeatno: function () {
      this.$emit('tips', false)
      // this.createOrder()
      this.$emit('createOrder', true)
    },
    // 自动调座，是
    autoSeatyes: function () {
      this.$emit('tips', true)
      // this.createOrder()
      this.$emit('createOrder', true)
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped='scoped'>
// @import url(); 引入公共css类
.tips {
  padding-left: 25px;
  padding-right: 35px;
  // padding-bottom: 15px;
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  z-index: 11;
  bottom: 175px;
  width: 100%;
  box-sizing: border-box;
}

.simg {
  width: 31px;
  margin-bottom: -6px;
  margin-left: 10px;
}

.simg-t {
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;

  .simg-ti {
    font-size: 32px;
    color: #333;
    font-weight: bold;
    align-items: center;
    -webkit-align-items: center;
    line-height: 32px;
  }
}

.simg-2 {
  font-size: 24px;
  color: #888;
  margin-top: 3px
}

.switch-box {
  display: block;
  margin-right: 15px;
}

.switch-box-input {
  display: none;
}

.switch-box-slider {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 90px;
  background:#ddd;
  border-radius:25px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.switch-box-slider::after {
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 1.4px 1.4px 8.8px 0.2px rgba(169, 126, 11, 0.2);
  content: '';
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.switch-box-input:checked ~ .switch-box-slider::after {
  left: 49px;
}

.switch-box-input:checked ~ .switch-box-slider {
  background: #f7d429;
}

.showtips {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 11;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;

  .showtips-t {
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 50px;
    width: 88%;
    height: auto;
    background: #fff;
    border-radius: 35px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;

    h1 {
      font-size: 30px;
      padding-top: 50px;
      padding-bottom: 30px;
      text-align: center;
      font-weight: bold;
    }

    .showtips-t-d1 {
      font-size: 24px;
      line-height: 38px;
    }

    .showtips-t-d2 {
      font-size: 26px;
      margin-top: 20px;
      line-height: 36px;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 50px;
      padding-right: 50px;
      border: 2px solid #666;
      border-radius: 30px;
      color: #666;
    }
  }
}
.tocom-box
  border-radius: 20px;
  background: #fff;
  margin: 0 60px;
  padding: 40px 30px;
  .f30
    font-size:30px
  .f28
    font-size:28px
  .f24
    font-size:24px
  .cf
    color: #fff
  .showimg
    width: 150px;
    height: 150px;
    margin-top: -95px;
  .cf0
    color: #f00
.auto_s_btn
    background: rgba(209,209,209, 1);
    border-radius: 50px;
    width: 45%;
.auto_s_btn
    background: rgba(209,209,209, 1);
    border-radius: 50px;
    width: 45%;
.asbyes
    background-color: #f7d429;
.boxshow
    position: fixed;
    z-index: 9;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right 0;
/*wbcss*/
.dfcc,
.dfccs,
.dflc,
.dflr,
.dflrs,
.dfls,
.dfrs {
  display: -webkit-flex;
  display: flex
}

.dfcc,
.dfccs {
  justify-content: center;
  -webkit-justify-content: center
}
.dflc,
.dfcc,
.dfccs,
.dflr,
.dflrs,
.dfls,
.dfrs {
  align-items: center;
  -webkit-align-items: center
}

.dflr {
  justify-content: space-between;
  -webkit-justify-content: space-between
}

.dflrs {
  justify-content: space-around;
  -webkit-justify-content: space-around
}

.dfls {
  justify-content: flex-start;
  -webkit-justify-content: flex-start
}

.dfrs {
  justify-content: flex-end;
  -webkit-justify-content: flex-end
}

.dfccs {
  -webkit-flex-direction: column;
  flex-direction: column
}
.w1 {
    width: 100%;
}
.py10
  padding: 10px 0;
.py15
  padding: 15px 0;
.mt30
  margin-top: 30px;
.mt10
  margin-top: 10px;
.mt15
  margin-top: 15px;
.mb20
  margin-bottom: 20px;
.mb7
  margin-bottom: 7px;
.dn
  display: none;
</style>
